<template>
  <view class="container" >
    <!-- 自定义顶部导航栏 -->
    <view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-content">
        <view class="left-area" @click="goBack">
          <text class="iconfont icon-more trasnicon" @click="goBack"></text>
          <text class="nav-title">新品推荐</text>
        </view>
      
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="page-content" :style="{ paddingTop: navHeight + 'px' }">
      <!-- 顶部banner -->
      <view class="banner">
        <image src="https://picsum.photos/800/300" mode="aspectFill"></image>
      </view>
      
      <!-- 分类列表 -->
      <view class="category-list">
		  
        <view v-for="(category, index) in categories" :key="index" class="category-item">
		<view class="icon">
			
				<view class="icon-info" >
					<text class="iconfont icon-dianzan"></text>
					<view class="dingwei">推荐</view>
				</view>
			
		</view>
			<image :src="category.shops[0].image" mode="aspectFill" class="category-image"></image>
			<view class="category-box">
				<!-- 分类标题栏 -->
				<view class="category-header">
				  <text class="category-title">{{category.title}}</text>
				
				</view>
				
				<!-- 分类商品列表 -->
				<view class="shop-list">
					<view v-for="(shop, shopIndex) in category.shops" :key="shopIndex" class="shop-item">
					  <view class="image">
						  <image :src="shop.image" mode="aspectFill" class="shop-image">
						  						 
						  </image>
					  	<view class="icon">
					  		
					  			<view class="icon-info" >
					  				
					  				<view class="price">{{shop.price}}</view>
									<view class="text">
										元
									</view>
					  			</view>
					  		
					  	</view>
					  </view>
					  
					
					  <view class="shop-info">
						
					
						<view class="shop-meta">
						 
						  <view class="price">月售{{shop.soldMonthly}}</view>
					
						 
						  	<view class="name">{{shop.name}}</view>
						 
						</view>
					  </view>
					</view>
				</view>
				
			</view>
       
		  
		  
        </view>
      </view>
    </view>
	
	<view class="nullBox"></view>
  </view>
</template>

<script>
export default {
	
  data() {
    return {
      statusBarHeight: 0,
      navHeight: 0,
      categories: [
      {
          title: '杭州特色小笼包（赤峰长青店）',
          shops: [
            {
              name: '鲜肉包',
              image: 'https://picsum.photos/200/200?random=1',
              price: '12.0',
			  soldMonthly:'1578'
            },
            {
              name: '香菇青菜包',
              image: 'https://picsum.photos/200/200?random=2',
              price: '12.0',
              soldMonthly:'1578'
            },
            {
              name: '祖传秘制小笼包',
              image: 'https://picsum.photos/200/200?random=3',
             price: '12.0',
             soldMonthly:'1578'
            },
        	{
        	  name: '猪肉笼包',
        	  image: 'https://picsum.photos/200/200?random=3',
        	 price: '12.0',
        	 soldMonthly:'1578'
        	}
          ]
        },
		{
		    title: '杭州特色小笼包（赤峰长青店）',
		    shops: [
		      {
		        name: '鲜肉包',
		        image: 'https://picsum.photos/200/200?random=1',
		        price: '12.0',
					  soldMonthly:'1578'
		      },
		      {
		        name: '香菇青菜包',
		        image: 'https://picsum.photos/200/200?random=2',
		        price: '12.0',
		        soldMonthly:'1578'
		      },
		      {
		        name: '祖传秘制小笼包',
		        image: 'https://picsum.photos/200/200?random=3',
		       price: '12.0',
		       soldMonthly:'1578'
		      },
		  	{
		  	  name: '猪肉笼包',
		  	  image: 'https://picsum.photos/200/200?random=3',
		  	 price: '12.0',
		  	 soldMonthly:'1578'
		  	}
		    ]
		  },
				{
				    title: '杭州特色小笼包（赤峰长青店）',
				    shops: [
				      {
				        name: '鲜肉包',
				        image: 'https://picsum.photos/200/200?random=1',
				        price: '12.0',
							  soldMonthly:'1578'
				      },
				      {
				        name: '香菇青菜包',
				        image: 'https://picsum.photos/200/200?random=2',
				        price: '12.0',
				        soldMonthly:'1578'
				      },
				      {
				        name: '祖传秘制小笼包',
				        image: 'https://picsum.photos/200/200?random=3',
				       price: '12.0',
				       soldMonthly:'1578'
				      },
				  	{
				  	  name: '猪肉笼包',
				  	  image: 'https://picsum.photos/200/200?random=3',
				  	 price: '12.0',
				  	 soldMonthly:'1578'
				  	}
				    ]
				  },
						{
						    title: '杭州特色小笼包（赤峰长青店）',
						    shops: [
						      {
						        name: '鲜肉包',
						        image: 'https://picsum.photos/200/200?random=1',
						        price: '12.0',
									  soldMonthly:'1578'
						      },
						      {
						        name: '香菇青菜包',
						        image: 'https://picsum.photos/200/200?random=2',
						        price: '12.0',
						        soldMonthly:'1578'
						      },
						      {
						        name: '祖传秘制小笼包',
						        image: 'https://picsum.photos/200/200?random=3',
						       price: '12.0',
						       soldMonthly:'1578'
						      },
						  	{
						  	  name: '猪肉笼包',
						  	  image: 'https://picsum.photos/200/200?random=3',
						  	 price: '12.0',
						  	 soldMonthly:'1578'
						  	}
						    ]
						  },
								{
								    title: '杭州特色小笼包（赤峰长青店）',
								    shops: [
								      {
								        name: '鲜肉包',
								        image: 'https://picsum.photos/200/200?random=1',
								        price: '12.0',
											  soldMonthly:'1578'
								      },
								      {
								        name: '香菇青菜包',
								        image: 'https://picsum.photos/200/200?random=2',
								        price: '12.0',
								        soldMonthly:'1578'
								      },
								      {
								        name: '祖传秘制小笼包',
								        image: 'https://picsum.photos/200/200?random=3',
								       price: '12.0',
								       soldMonthly:'1578'
								      },
								  	{
								  	  name: '猪肉笼包',
								  	  image: 'https://picsum.photos/200/200?random=3',
								  	 price: '12.0',
								  	 soldMonthly:'1578'
								  	}
								    ]
								  },
										
		]
	
	
	}
  },
  onLoad() {
    // 获取系统信息设置状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    // 导航栏总高度 = 状态栏高度 + 44(导航内容高度)
    this.navHeight = systemInfo.statusBarHeight + 44
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss">
	@import 'new.scss';

</style> 